<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LazyLoad</title>
    <style type="text/css">
        img {
            display: block;
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
<img style="width: 100%;height: 500px;margin-top:10px" src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">

<div>
    <p>到底啦没有啦</p>
</div>
<script src="//cdn.66173.cn/www/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(window).ready(function () {
        // getScrollHeight()
    })

    var aImg = document.querySelectorAll('img');
    var len = aImg.length;
    var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
    var wHeight=$(window).height(); //获取屏幕可视高度
    $('img').each(function () {     //对图片进行循环
        var ownHeight=$(this).offset().top;     //获取当前图片在文档中的位置
        if(ownHeight<=wHeight){     //如果当前图片位置在屏幕可视范围之内加载此图片
            $(this).attr('src',$(this).attr('guoyu-src'));
        }
    });
    window.onscroll = function() {        //添加屏幕滚动事件
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;   //获取屏幕已滚动高
        for (var i = n; i <len; i++) {
            if (aImg[i].offsetTop < seeHeight + scrollTop+500) {  //当图片在屏幕滚动时，距离可视区域500像素时加载此图片，
                if (aImg[i].getAttribute('src') == '') {
                    var h=aImg[i].innerHeight;
                    aImg[i].src = aImg[i].getAttribute('guoyu-src');

                }
                n = i + 1;
                console.log('n = ' + n);
                if(i==len-1){
                   $('.bottom_txt').css("display","block")
                }
            }
        }
    };
    // 获取文档内容实际高度
    function getDocumentHeight(){
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }
    //获取可视窗口的高度
    function getClientHeight(){
        var clientHeight=0;
        if(document.body.clientHeight&&document.documentElement.clientHeight){
            var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }else{
            var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }
        return clientHeight;
    }

    //获取滚动条的高度
    function getScrollHeight(){
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        return scrollTop;
    }
    var dHeight=getDocumentHeight();
    console.log("实际总高度"+dHeight)
    //当页面滚动的时候实时计算滚动条距离底部的高度
    // 窗口可视范围的高度
    var wHeight=getClientHeight();
    console.log("可视窗口高度"+wHeight)
    // 窗口滚动条高度
    var sHeight= getScrollHeight();
    // 获取文档内容实际高度
    console.log("滚动条的高度"+sHeight)
    // 滚动条距离底部的高度
    var bheight=dHeight-wHeight-sHeight;
    console.log("滚动条距离底部的高度"+bheight)
    // 如果高度小于自己设定的值时并且flag为true时，可以调用请求数据的函数，请求更多的数据
    if(bheight>60 && flag) {
        ++num;  //  num自增1
        getData(num);
    }else{
        console.log("没有更多数据了")
    }
</script>
</body>
</html>